$typeArea: 1226px;

@mixin typeAreaCenter {
    width: $typeArea;
    margin: 0 auto;
}

//  @include  也可以设置参数和默认值
@mixin textCenter($height: 16px) {
    text-align: center;
    line-height: $height;
}

// 让一个类 继承 另一个类的属性和方法 
// 将共有的属性和方法 提取出来放到 一个类中 => 让其他类 继承该类  => 群组选择器
// .w {
//     @include typeAreaCenter();
//     @include textCenter(40px);
//     // height: 40px;
// }

// .header {
//     @extend .w;
// }

// .container {
//     @extend .w;
// }

// .footer {
//     @extend .w;
// }

// 如何想让一个类只能被继承 => 不能使用 => 在类名前加 %即可( %w)
%w {
    @include typeAreaCenter();
    @include textCenter(40px);
    // height: 40px;
}

.header {
    @extend %w;
}

.container {
    @extend %w;
}

.footer {
    @extend %w;
}